 <template>
  <div class="login">
    <router-link
      :to="{
        name: 'Home',
      }"
      ><img src="../assets/logo.webp" alt=""
    /></router-link>
    <div class="box">
      <input type="text" v-model="userName" placeholder="请输入用户名" />
      <input
        type="password"
        v-model="password"
        name=""
        id=""
        placeholder="请输入密码"
      />
      <input type="button" value="登录" @click="login" />
    </div>
    <router-link
      class="toreg"
      :to="{
        name: 'Reg',
      }"
      >没有账号？去注册>></router-link
    >
  </div>
</template>
 
 <script>
import { setToken } from "../utils/tools.js";
import { log } from "../services/user.js";

export default {
  methods: {
    login() {
      if (this.userName && this.password) {
        log({ userName: this.userName, password: this.password }).then(
          (res) => {
            if (res.code === 1) {
              setToken(res.data);
              this.$router.replace({
                name: "User",
              });
            } else alert(res.data);
          }
        );
      } else alert("请完善信息！！");
    },
  },
  data() {
    return {
      userName: "",
      password: "",
    };
  },
};
</script>
 
<style scoped>
img {
  width: 60vw;
  border-radius: 10px;
  margin-top: 8rem;
}
.box {
  height: 20vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  margin: 2rem auto;
}
input {
  height: 2.5rem;
  width: 98%;
  display: block;
}
input[type="button"] {
  background: gold;
}
.toreg {
  font-size: 1rem;
  float: right;
  color: blue;
}
</style>